<template>
  <div>
    <van-nav-bar
      title="肠内营养"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-form @submit="onSubmit">
      <van-row>
        <van-field
          readonly
          v-model="wardText"
          is-link
          required
          name="picker"
          label="病区"
          placeholder="点击选择病区"
          @click="showPicker = true"
          :rules="[{ required: true, message: '请选择病区' }]"
        />
        <van-popup
          :close-on-click-overlay="false"
          v-model:show="showPicker"
          position="bottom"
        >
          <template #default>
            <van-row
              style="
                padding: 10px 16px;
                bottom: 39.5vh;
                /* height: 60vh; */
                width: 100%;
                background: #fff;
                border-radius: 10px 10px 0 0;
              "
            >
              <van-col
                align="left"
                span="12"
                style="font-size: 14px; color: #999"
                @click="showPicker = false"
              >
                关闭
              </van-col>
              <van-col
                align="right"
                style="font-size: 14px; color: #08d781"
                span="12"
                @click="onConfirm()"
              >
                确认
              </van-col>
            </van-row>
            <van-collapse
              style="overflow-y: auto"
              v-model="wardActiveNames"
              accordion
              @change="wardChange"
            >
              <div v-for="item in wardLit" :key="item.id">
                <van-collapse-item :title="item.name" :name="item.name">
                  <template #default>
                    <div
                      @click="selectWords(words)"
                      v-for="words in item.systemBedOrgs"
                      :key="words.id"
                      style="padding: 10px 0"
                      :class="{ activeText: words.active }"
                    >
                      {{ words.ward }}
                    </div>
                  </template>
                </van-collapse-item>
              </div>
            </van-collapse>
          </template>
        </van-popup>
      </van-row>
      <van-row align="left" style="width: 100%" gutter="10">
        <van-field
          v-model.trim="paramData.bedNo"
          required
          label="床号"
          :rules="[{ required: true, message: '请填写床号' }]"
          placeholder="请输入床号"
        />
      </van-row>
      <van-row>
        <van-field
          v-model.trim="paramData.realName"
          required
          label="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
          placeholder="请输入姓名"
        />
      </van-row>
      <van-row>
        <van-field
          type="number"
          v-model.trim="paramData.age"
          label="年龄"
          placeholder="请输入年龄"
          style="margin-left: 7px"
        />
      </van-row>
      <van-row>
        <van-field
          type="number"
          v-model="paramData.height"
          label="身高"
          placeholder="请输入身高"
          @input="countChange"
          style="margin-left: 7px; width: 90%"
        />
        <div style="display: inline-block; margin-top: 16px">
          <span style="font-size: 16px">cm</span>
        </div>
      </van-row>
      <van-row>
        <van-field
          type="number"
          v-model="paramData.weight"
          label="体重"
          @input="countChange"
          placeholder="请输入体重"
          style="margin-left: 7px; width: 90%"
        />
        <div style="display: inline-block; margin-top: 16px">
          <span style="font-size: 16px">kg</span>
        </div>
      </van-row>
      <div style="background-color: #fff; padding: 10px">
        <van-row>
          <van-col
            span="24"
            align="left"
            style="margin-left: 6px; margin-top: 20px"
          >
            <span style="font-size: 16px">营养摄入推荐</span>
          </van-col>
        </van-row>
        <div
          v-if="inputHeight > 0"
          style="margin-top: 20px; margin-bottom: 20px"
        >
          <van-row>
            <van-col span="12" align="center">
              <span style="font-weight: bold">
                {{ toFixedEvent(2, paramData.energy) }} kcal
              </span>
            </van-col>
            <van-col span="12" align="center">
              <span style="font-weight: bold">
                {{ toFixedEvent(2, paramData.protein) }} g
              </span>
            </van-col>
          </van-row>
          <van-row>
            <van-col span="12" align="center">
              <span style="color: #999999; font-size: 14px">总能量</span>
            </van-col>
            <van-col span="12" align="center">
              <span style="color: #999999; font-size: 14px">蛋白质</span>
            </van-col>
          </van-row>
          <van-row style="margin-top: 40px">
            <van-col span="12" align="center">
              <span style="font-weight: bold">
                {{ toFixedEvent(2, paramData.fat) }} g
              </span>
            </van-col>
            <van-col span="12" align="center">
              <span style="font-weight: bold">
                {{ toFixedEvent(2, paramData.carbohydrate) }} g
              </span>
            </van-col>
          </van-row>
          <van-row>
            <van-col span="12" align="center">
              <span style="color: #999999; font-size: 14px">脂肪</span>
            </van-col>
            <van-col span="12" align="center">
              <span style="color: #999999; font-size: 14px">碳水化合物</span>
            </van-col>
          </van-row>
        </div>
        <div v-else>
          <van-row>
            <van-col span="24" align="center" style="margin-top: 20px 0">
              <img src="@/assets/img/none.png" alt="" />
              <van-row align="center">
                <van-col span="24" align="center" style="line-height: 24px">
                  <span style="font-size: 14px; color: #999999">暂无数据</span>
                </van-col>
              </van-row>
            </van-col>
          </van-row>
        </div>
      </div>
      <van-popup
        class="code-phone"
        v-model:show="showBottom"
        position="bottom"
        :style="{ height: '30%' }"
      >
        <!-- <div style="width: 100%" v-if="!showPhoneCode">
          <van-nav-bar
            title="图形验证码"
            left-text="取消"
            @click-left="imgCodeCancel"
          />
          <van-row class="img-code">
            <van-col span="17">
              <van-field v-model="imgCode"></van-field>
            </van-col>
            <van-col span="7" align="right">
              <img
                :src="`https://xiangya.wx.meyerhealth.com/saleh5/base/code/photo?photoCodeKey=${timeStr}`"
                alt=""
              />
            </van-col>
          </van-row>
          <div
            style="
              width: 100%;
              padding: 0 16px;
              box-sizing: border-box;
              margin-top: 44px;
            "
          >
            <van-button round @click="codeSubmit" type="primary" size="large">
              <span style="font-size: 16px">确定</span>
            </van-button>
          </div>
        </div> -->
        <div style="width: 100%">
          <van-nav-bar
            title="手机验证码"
            left-text="取消"
            @click-left="imgCodeCancel"
          />
          <van-row class="img-code">
            <van-col span="24">
              <van-field
                class="phone-code-input"
                v-model="paramData.phoneCode"
                placeholder="请输入手机验证码"
              ></van-field>
            </van-col>
          </van-row>
          <div
            style="
              width: 100%;
              padding: 0 16px;
              box-sizing: border-box;
              margin-top: 44px;
            "
          >
            <van-button
              round
              @click="showBottom = false"
              type="primary"
              size="large"
            >
              <span style="font-size: 16px">确定</span>
            </van-button>
          </div>
        </div>
      </van-popup>
      <van-row>
        <van-button
          native-type="submit"
          block
          round
          style="background-color: #08d781; border: none"
        >
          <span style="font-size: 16px; color: #ffffff"> 下一步 </span>
        </van-button>
      </van-row>
    </van-form>
  </div>
</template>
<script>
import { nextTick, reactive, toRefs, onBeforeMount, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { toFixedEvent, setStorage, getStorage } from "@/utils/common";
import { siteTitle } from "@/settings";
import {
  wardList,
  imgCodeSend,
  wardSave,
  getInfo,
} from "@/api/enteralNutrition/enteralNutrition.js";
import { wechatAuthorize } from "@/utils/common";
import { showToast, showNotify } from "vant";
export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      routerType: route.query.routerType,
      jumpPath: route.query.jumpPath,
      selectWard: {},
      wardActiveNames: "",
      infoType: 0,
      wechatCode: route.query.code,
      imgCodeFlag: 0,
      wardText: "",
      showPhoneCode: false,
      form: {},
      showPicker: false,
      wardLit: [],
      paramData: {
        phone: "",
      },
      inputHeight: "",
      showBottom: false,
      timeStr: new Date().getTime(),
      imgCode: "",
      phoneCodeType: 0,
    });

    watch(
      () => state.selectWard,
      (val, oldVal) => {
        delete oldVal.active;
      },
      {
        deep: true,
      }
    );

    // 获取病区下拉
    const get = () => {
      wardList({}).then((v) => {
        const { data } = v;
        state.wardLit = data;
      });
    };
    get();

    // 返回上一页
    const onClickLeft = () => {
      router.go(-1);
    };

    const onSubmit = () => {
      wardSave(Object.assign(state.paramData)).then((v) => {
        const data = v.data;
        setStorage(`${siteTitle}_orgName`, state.paramData.orgName);

        // if (state.paramData.orgName.indexOf("西区") !== -1) {
        //   showNotify({
        //     message: "东区暂不支持治疗膳食和营养普餐",
        //     background: "#e7e7e7",
        //     color: "#999",
        //   });
        //   router.go(-1);
        // } else {
        // }
        if (state.jumpPath == 3) {
          router.push({
            name: "orderingDishes",
          });
        } else if (state.routerType == 0) {
          router.push({
            name: "goodsManage",
          });
        }
      });
    };
    // 选择成功
    const onConfirm = () => {
      state.wardText = state.selectWard.ward;
      state.paramData.ward = state.selectWard.ward;
      state.showPicker = false;
    };
    // 获取身高体重计算
    const countChange = () => {
      if (state.paramData.height && state.paramData.weight) {
        state.inputHeight = state.paramData.height - 105;
        if (state.inputHeight > 0) {
          state.paramData.energy = state.inputHeight * 30;
          state.paramData.fat = (state.paramData.energy * 0.25) / 9;
          state.paramData.protein = (state.paramData.energy * 0.15) / 4;
          state.paramData.carbohydrate = (state.paramData.energy * 0.6) / 4;
        }
      }
    };
    // 配置病区数据结构
    const columnsFieldNames = {
      text: "ward",
      value: "ward",
      // children: "cities",
    };
    // 选择病区
    const selectWords = (val) => {
      val.active = true;
      state.selectWard = val;
    };
    // 获取用户信息
    const queryInfo = () => {
      getInfo({}).then((v) => {
        const data = v.data;
        state.paramData = data;
        state.wardText = data.ward;
        state.orgName = data.orgName;
        countChange();
      });
    };
    queryInfo();
    // 病区下拉
    const wardChange = (val) => {
      console.log(val);
      state.paramData.orgName = val;
    };
    return {
      wardChange,
      selectWords,
      toFixedEvent,
      columnsFieldNames,
      onSubmit,
      onClickLeft,
      ...toRefs(state),
      onConfirm,
      countChange,
    };
  },
};
</script>
<style lang="scss" scoped>
::v-deep .van-field__error-message {
  text-align: right;
}
::v-deep .van-nav-bar__text {
  font-size: 14px;
  color: #999 !important;
}

.van-nav-bar {
  width: 100%;
  background: transparent;

  ::v-deep .van-nav-bar__text {
    color: #4bbdbe;
  }
  ::v-deep .van-nav-bar__left {
    .van-badge__wrapper {
      color: #000;
    }
  }
}
.van-form {
  padding: 0 15px;
}
.van-row {
  line-height: 16pt;
}
::v-deep .van-field {
  padding: 16px 10px;
  border-bottom: 1px solid #e7e7e7;
  label,
  input {
    font-size: 16px;
    text-align: right;
  }
}
.input-title {
  background: transparent;
  padding: 10px 0;
}
.code-phone {
  .img-code {
    align-items: end;
    padding: 0 16px;
    margin-top: 10px;
  }
  img {
    width: 80px;
    height: 35px;
  }
  .van-button {
    background: #08d781;
    border: none;
  }
}
::v-deep .phone-code-input {
  input {
    text-align: center !important;
  }
}
.van-collapse {
  height: 40vh;
}
.activeText {
  background: #08d781;
  color: #fff;
  border-radius: 4px;
}
</style>
